import EvaluationSelect, { Value as EvaluationSelectValue } from "@/components/EvaluationSelect";
import { eqV1ControllerShowOpen } from "@/services/auto/eq";
import { useRequest } from "ahooks";
import { Form, FormInstance, Radio } from "antd";
import { EvaluationCategory } from "common/utils/data";


export default function CreateFromUuidConfirm({
    form,
    originalUuid,
}: {
    form: FormInstance<FormData>;
    originalUuid: string;
}) {
    const {
        data: originalData,
    } = useRequest(eqV1ControllerShowOpen, {
        defaultParams: [{uuid: originalUuid}]
    })

    return <Form form={form}>
        <Form.Item name="isOriginal" label="是否基于原耳机" initialValue={false} rules={[{ required: true, message: '请选择是否基于原耳机' }]}>
            <Radio.Group className="flex flex-col gap-[8px] mt-[6px]" options={[
                { label: <div>是{originalData && <span className='text-[12px] ml-[8px] text-gray-500'>{`【${originalData.evaluation.brand.title}】${originalData.evaluation.title} - ${originalData.dataGroup}`}</span>}</div>, value: true },
                { label: <div>否，重新选择当前耳机<span className='text-[12px] ml-[8px] text-gray-500'>自动补偿至目标频响</span></div>, value: false }
            ]} />
        </Form.Item>
        <Form.Item noStyle dependencies={['isOriginal']}>
            {({ getFieldValue }) => {
                return !getFieldValue('isOriginal') ? (
                    <Form.Item name="current" label="当前耳机" required rules={[{ required: true, message: '请选择当前耳机' }]}>
                        <EvaluationSelect category={EvaluationCategory.EARBUDS} withDataGroup />
                    </Form.Item>
                ) : null;
            }}
        </Form.Item>
    </Form>;
}

export interface FormData {
    isOriginal: boolean;
    current: EvaluationSelectValue<true>;
}